<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="this.$t('modify')"
    width="40%">
    <el-form ref="form" :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="this.$t('eqpId')">
            <span>{{ form.eqpId }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="this.$t('AlarmCode')">
            <span>{{ form.alarmID }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item :label="this.$t('eqpModel')">
            <span>{{ form.eqpModel }}</span>
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="this.$t('IsSelfAlarm')">
            <el-tag :type="form.isEqpAlarm?'success':'danger'" effect="dark">{{ form.isEqpAlarm?$t('yes'): $t('no') }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label="this.$t('description')">
        <el-input
          :rows="2"
          v-model="form.alarmDesc"
          type="textarea"/>
      </el-form-item>
      <el-form-item :label="this.$t('AlarmLevel')">
        <el-select v-model="form.alarmLevel" :style="{width: '100%'}">
          <el-option
            v-for="item of alarmLevelList"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="this.$t('MTBAOrNot')">
        <el-switch
          v-model="form.mtba"
          :active-value="1"
          :inactive-value="2"
          active-color="#13ce66"
          inactive-color="#ff4949"/>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAllLevel } from '@/api/alarm/level'
import infoMaintainApi from '@/api/alarm/infoMaintain'
export default {
  name: 'InfoMaintainForm',
  data() {
    return {
      dialogVisible: false,
      form: {},
      alarmLevelList: []
    }
  },
  methods: {
    doSave() {
      infoMaintainApi.doUpdate(this.$clearNull(this.form)).then(res => {
        this.$betterTips(res, this.handleUpdate, this.handleClose)
      })
    },
    async handleOpen(id) {
      const res = await infoMaintainApi.getInfo({ id })
      this.getLevelList()
      this.form = res.data
      this.dialogVisible = true
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    async getLevelList() {
      const res = await getAllLevel()
      this.alarmLevelList = res.data
    }
  }
}
</script>

<style scoped lang="scss"></style>
